<script setup lang="ts">
import { onMounted } from 'vue'
import { NCard, NAvatar, NIcon, NEllipsis } from 'naive-ui'
import { CheckOutlined, ExclamationOutlined, TeamOutlined, QuestionOutlined, SwapOutlined, CloseOutlined, SendOutlined } from '@vicons/antd'
import { useFlowStore } from '../flowStore'
import { useDictStore } from '@/stores/dictStore'
import UserInfoPopover from '../user-info-popover/index.vue'

const dictStore = useDictStore()
const flowStore = useFlowStore()

const userColorMap = new Map()

function getUserName(userName: string): string {
    if (userName.length > 2) {
        return userName.substring(userName.length - 2)
    }
    return userName
}

function getUserColor(userCode: string): string {
    if (userColorMap.has(userCode)) {
        return userColorMap.get(userCode)
    }
    const colorArr = [
        "rgb(24, 144, 255)",
        "rgb(245, 34, 45)",
        "rgb(250, 84, 28)",
        "rgb(250, 173, 20)",
        "rgb(19, 194, 194)",
        "rgb(82, 196, 26)",
        "rgb(47, 84, 235)",
        "rgb(114, 46, 209)"
    ]
    const color = colorArr[Math.round(Math.random() * 7)]
    userColorMap.set(userCode, color)
    return color
}
</script>

<template>
    <n-card title="流转信息" :content-style="{ overflowY: 'auto' }">
        <div class="timeline">
            <div v-for="(task, index) in flowStore.taskList" :key="task.taskId">
                <div v-if="task.userTaskList.length" class="timeline-item">
                    <div class="item">
                        <div class="item-icon">
                            <user-info-popover placement="left" :user-info="task.userTaskList[0].userInfo">
                                <div>
                                    <n-avatar v-if="task.userTaskList.length === 1" :size="36" round
                                        :style="{ color: getUserColor(task.userTaskList[0].userId), backgroundColor: 'rgb(239,239,239)', cursor: 'pointer' }">
                                        {{ getUserName(task.userTaskList[0].userInfo.userName) }}
                                    </n-avatar>
                                </div>
                            </user-info-popover>
                            <n-avatar v-if="task.userTaskList.length > 1" :size="36" round
                                :style="{ backgroundColor: 'rgb(239,239,239)' }">
                                <n-icon size="24" color="rgb(24, 144, 255)">
                                    <team-outlined />
                                </n-icon>
                            </n-avatar>

                            <div v-if="task.taskStatus === '9'" class="item-status success">
                                <n-icon color="#ffffff" size="12">
                                    <check-outlined />
                                </n-icon>
                            </div>
                            <div v-if="['0', '1', '2'].includes(task.taskStatus)" class="item-status warn">
                                <n-icon color="#ffffff" size="12">
                                    <question-outlined />
                                </n-icon>
                            </div>
                            <div v-if="['4'].includes(task.taskStatus)" class="item-status warn">
                                <n-icon color="#ffffff" size="12">
                                    <close-outlined />
                                </n-icon>
                            </div>
                            <div v-if="['3', '8'].includes(task.taskStatus)" class="item-status error">
                                <n-icon color="#ffffff" size="12">
                                    <exclamation-outlined />
                                </n-icon>
                            </div>
                        </div>
                        <div v-if="index !== flowStore.taskList.length - 1" class="item-line"></div>
                    </div>
                    <div v-if="task.userTaskList.length === 1" class="item-info">
                        <div class="task-info">
                            <div class="task-name">{{ task.taskName }}</div>
                            <div class="task-date">
                                {{ ["3", "8", "9"].includes(task.taskStatus) ? task.endTime : task.createTime }}
                            </div>
                        </div>
                        <div>
                            <div class="user-message-name">
                                {{ task.userTaskList[0].userInfo.userName }}
                                <span>：{{ dictStore.dictItem("WORKFLOW_USER_TASK_STATUS",
                                    task.userTaskList[0].userTaskStatus)
                                }}</span>
                            </div>
                            <div style="margin-top:8px;">
                                <div v-for="taskComment in task.taskCommentList">
                                    <div v-if="taskComment.message" class="user-message-info">
                                        <div class="user-message-name">{{ taskComment.userInfo.userName }}</div>
                                        <div class="user-message-date">{{ taskComment.createTime }}</div>
                                    </div>
                                    <div v-if="taskComment.message" class="user-message">{{ taskComment.message }}</div>
                                </div>
                            </div>
                            <div style="height: 24px;"></div>
                        </div>
                    </div>
                    <div v-if="task.userTaskList.length > 1" class="item-info">
                        <div class="task-info">
                            <div class="task-name">{{ task.taskName }}</div>
                            <div class="task-date">
                                {{ ["3", "8", "9"].includes(task.taskStatus) ? task.endTime : task.createTime }}
                            </div>
                        </div>
                        <div class="item-user-list">
                            <div v-for="userTask in task.userTaskList" :key="userTask.userTaskId" class="user">
                                <div class="item-icon">
                                    <user-info-popover placement="left" :user-info="userTask.userInfo">
                                        <div>
                                            <n-avatar :size="36" round
                                                :style="{ color: getUserColor(userTask.userId), backgroundColor: 'rgb(239,239,239)', cursor: 'pointer' }">
                                                {{ getUserName(userTask.userInfo.userName) }}
                                            </n-avatar>
                                        </div>
                                    </user-info-popover>
                                    <div v-if="userTask.userTaskStatus === '9'" class="item-status warn">
                                        <n-icon color="#ffffff" size="12">
                                            <close-outlined />
                                        </n-icon>
                                    </div>
                                    <div v-if="userTask.userTaskStatus === '4'" class="item-status info">
                                        <n-icon color="#ffffff" size="12">
                                            <send-outlined />
                                        </n-icon>
                                    </div>
                                    <div v-if="userTask.userTaskStatus === '3'" class="item-status info">
                                        <n-icon color="#ffffff" size="12">
                                            <swap-outlined />
                                        </n-icon>
                                    </div>
                                    <div v-if="userTask.userTaskStatus === '2'" class="item-status success">
                                        <n-icon color="#ffffff" size="12">
                                            <check-outlined />
                                        </n-icon>
                                    </div>
                                    <div v-if="userTask.userTaskStatus === '1'" class="item-status error">
                                        <n-icon color="#ffffff" size="12">
                                            <exclamation-outlined />
                                        </n-icon>
                                    </div>
                                    <div v-if="userTask.userTaskStatus === '0'" class="item-status warn">
                                        <n-icon color="#ffffff" size="12">
                                            <question-outlined />
                                        </n-icon>
                                    </div>
                                </div>
                                <n-ellipsis style="max-width: 48px">
                                    {{ userTask.userInfo.userName }}
                                </n-ellipsis>
                            </div>
                        </div>
                        <div style="margin-top:8px;">
                            <div v-for="taskComment in task.taskCommentList">
                                <div v-if="taskComment.message" class="user-message-info">
                                    <div class="user-message-name">{{ taskComment.userInfo.userName }}</div>
                                    <div class="user-message-date">{{ taskComment.createTime }}</div>
                                </div>
                                <div v-if="taskComment.message" class="user-message">{{ taskComment.message }}</div>
                            </div>
                        </div>
                        <div style="height: 24px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </n-card>
</template>

<style scoped>
.timeline {
    height: 100%;
}

.timeline .timeline-item {
    display: flex;
    margin-bottom: 7px;
}

.timeline .timeline-item .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 36px;
}

.timeline .timeline-item .item-user-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 18px;
}

.timeline .timeline-item .item-user-list .user {
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline .timeline-item .item-icon {
    position: relative;
    width: 36px;
}

.timeline .timeline-item .item-icon .item-status {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 24px;
    right: -6px;
    border: 1px solid #ffffff;
}

.timeline .timeline-item .item-icon .info {
    background-color: rgb(24, 144, 255);
}

.timeline .timeline-item .item-icon .success {
    background-color: #18a058;
}

.timeline .timeline-item .item-icon .warn {
    background-color: #f0a020;
}

.timeline .timeline-item .item-icon .error {
    background-color: #d03050;
}

.timeline .timeline-item .item .item-line {
    width: 1px;
    height: 100%;
    background-color: #DDD;
}

.timeline .timeline-item .item-info {
    padding-left: 8px;
    width: 100%;
}

.timeline .timeline-item .item-info .task-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 28px;
}

.timeline .timeline-item .item-info .task-info .task-name {
    font-size: 18px;
    line-height: 28px;
}

.timeline .timeline-item .item-info .task-info .task-date {
    font-size: 12px;
    line-height: 28px;
}

.timeline .timeline-item .item-info .user-message-name {
    font-size: 14px;
    height: 28px;
    line-height: 28px;
}

.timeline .timeline-item .item-info .user-message {
    padding: 6px;
    background-color: rgb(249, 249, 249);
    font-size: 14 px;
    line-height: normal;
}

.timeline .timeline-item .item-info .user-message-info {
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    display: flex;
    justify-content: space-between;
}

.timeline .timeline-item .item-info .user-message-date {
    font-size: 12px;
    line-height: 28px;
}
</style>